---
import { DateTime } from 'luxon';
import ChangelogImages from '../ChangelogImages';
import type { ChangelogDocument } from '../../queries/changelog';

interface Props {
  changelog: ChangelogDocument;
}

const { changelog } = Astro.props;

const formattedDate = DateTime.fromISO(changelog.createdAt).toFormat(
  'dd LLL, yyyy',
);
---

<div class='relative mb-6' id={changelog._id}>
  <span class='absolute top-2 -left-6 h-2 w-2 shrink-0 rounded-full bg-gray-300'
  ></span>

  <div
    class='mb-3 flex flex-col items-start gap-0.5 sm:flex-row sm:items-center sm:gap-2'
  >
    <span class='shrink-0 text-xs tracking-wide text-gray-400'>
      {formattedDate}
    </span>
    <span class='truncate text-base font-medium text-balance'>
      {changelog.title}
    </span>
  </div>

  <div class='rounded-xl border bg-white p-6'>
    {
      changelog.images && (
        <div class='-mx-6 mb-5 hidden sm:block'>
          <ChangelogImages images={changelog.images} client:load />
        </div>
      )
    }

    <div
      class='prose prose-sm [&_li_p]:my-0 prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul]:mt-3 [&>ul>li]:my-0 [&>ul>li]:mb-1'
      set:html={changelog.description}
    />
  </div>
</div>
